<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SSE</title>
</head>
<body>
<div id = "message">
    //这里展示支付状态信息
</div>
<script>
    if (window.EventSource) { //判断浏览器是否支持SSE
        //第2步，主动进行建立长连接，表明用户已经发起支付
        let source = new EventSource(
            'https://localhost:8888/orderpay?payid=1');
        let innerHTML = '';

        //监听服务器端发来的事件：open
        source.onopen = function(e) {
            innerHTML += "onopen：准备就绪，可以开始接收服务器数据" + "<br/>"; //支付结果
            document.getElementById("message").innerHTML = innerHTML;
        };
        //监听服务器端发来的事件：message
        source.onmessage = function(e) {
            innerHTML += "onmessage:" + e.data + "<br/>"; //支付结果
            document.getElementById("message").innerHTML = innerHTML;
        };
        //自定义finish事件，主动关闭EventSource
        source.addEventListener('finish', function(e) {
            source.close();
            innerHTML += "支付结果接收完毕，通知服务端关闭EventSource" +  "<br/>";
            document.getElementById("message").innerHTML = innerHTML;
        }, false);
        //监听服务器端发来的事件：error
        source.onerror = function(e) {
            if (e.readyState === EventSource.CLOSED) {
                innerHTML += "sse连接已关闭" +  "<br/>";
            } else {
                console.log(e);
            }
        };
    } else {
        console.log("你的浏览器不支持SSE");
    }
</script>

</body>
</html>